import React,{createRef} from 'react'
import { Form, Input, Button, Checkbox, Row, Col, message } from 'antd'
import {register} from '@/api/login'
import { withRouter } from "react-router-dom"
import '../index.scss'

interface IProps{
  history?: any;
 }
interface IState{
  logining: boolean;
}
class Index extends React.Component<IProps,IState> {
  form: React.RefObject<any>
  parent: any
  constructor(props) {
    super(props)
    this.form = createRef()
    this.parent = props.parent
    this.state = {
      logining: false,
    }
  }
  submit = async () => {
    const { getFieldValue } = this.form.current
    console.log(this.form.current)
    this.form.current.validateFields(['username', 'password', 'checkCode']).then(async values => {
      const params = {
        userName: getFieldValue('username'),
        password: getFieldValue('password'),
        nickName : getFieldValue('nickname'),
      }
      this.setState({logining:true})
      const res:any = await register(params)
      console.log(res)
      if(res.code==200){
        message.success('注册成功')
        setTimeout(()=>{
          console.log(this)
           this.props.history.push('/')
        },1000)
      }else{
        console.log('wo执行了吗')
        this.setState({logining:false})
      }
      
    }).catch(err => {
      console.log(err)
      this.setState({logining:false})
    })
  }
  render() {
    return (
      <div className='login-box'>
        <Form  ref={this.form}>
          <Form.Item
            label='用户名'
            labelCol={{ span: 4 }}
            name='username'
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          >
            <Input placeholder='手机号或邮箱' />
          </Form.Item>
          <Form.Item
            label='昵称'
            labelCol={{ span: 4 }}
            name='nickname'
            rules={[
              {
                required: true,
                message: '昵称!',
              },
            ]}
          >
            <Input placeholder='昵称' />
          </Form.Item>
          <Form.Item
            label='密码'
            labelCol={{ span: 4 }}
            name='password'
            rules={[
              {
                required: true,
                message: '密码!',
              },
            ]}
          >
            <Input.Password placeholder='请输入密码'/>
          </Form.Item>
          <Form.Item name='btn'>
            <div className='register-btn-box'>
              <Button type='primary' htmlType='submit'  className='login-btn' onClick={this.submit} disabled={this.state.logining}>
                注册
              </Button>
              <span className='login' onClick={()=>{this.parent.changeView('login')}}>登录</span>
            </div>
              
            </Form.Item>
        </Form>
      </div>
    )
  }
}
export default withRouter(Index)
